<template>
    <div>
        <div class="py-5 text-center">
            <img class="d-block mx-auto mb-4" src="@/assets/images/sequelize.jpg" />
            <p class="lead">
                爱就好比骑马和学法语，如果不趁年轻时学会，以后想学会就难了。
            </p>
            <p class="lead">
                Love is like riding or speaking French,if you don not learn it young, it's hard to get the trick of it
                later.
            </p>
            <!-- 人这一生，总要心碎一两次的。

                We must have our heart broken once or twice before we are done.
                世事无常，我们要随遇而安。

                It just happens, and we should live with it.

                人生就是不断收集回忆的过程，最终陪伴我们的也只有回忆了。

                The business of life is the acquisition of memories.In the end that's all there is.

                亲爱的，人生总是会遇到各种麻烦，我们得尽力去解决它。
                My dear, all life is a series of problems which we must try and solve.

                没有翻不了的山，没有沉不了的船。
                Every mountain is unclimbable until someone climbs it.Every ship is unsinkable until it sinks.

                世道变了，我们也得跟着变。

                The world moves on, and we must move with it.

                当坏事发生时，仍希望未发生过是毫无意义的，当务之急是减少损失。

                When something bad happens,there is no point in wishing it had not happened.The only option is to minimize the damage.
                每种生活都有它自己的规矩，如果你不愿意遵守，那么这种生活就不适合你。 -->
        </div>

        <div class="heading text-right mb">
            <div v-if="userInfo.username">
                <a href="">{{userInfo.username}}</a>
                <span> | </span>
                <a href="" @click.prevent="login">退出</a>
            </div>
            <div v-else>
                <a href="" @click.prevent="register">注册</a>
                <span> | </span>
                <a href="" @click.prevent="login">登录</a>
            </div>
        </div>

        <!-- 注册 -->
        <modal :show="modelName === 'register'" :title="'注册'" @close="modalClose">
            <form>
                <div class="form-group row">
                    <label for="reg_username" class="col-md-3 col-form-label">用户名</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" id="reg_username" placeholder="用户名"
                            v-model="register_info.username" />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="reg_password" class="col-md-3 col-form-label">密码</label>
                    <div class="col-md-9">
                        <input type="password" class="form-control" id="reg_password" placeholder="密码"
                            v-model="register_info.password" />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="reg_repassword" class="col-md-3 col-form-label">重复密码</label>
                    <div class="col-md-9">
                        <input type="password" class="form-control" id="reg_repassword" placeholder="重复密码"
                            v-model="register_info.repassword" />
                    </div>
                </div>
            </form>

            <template slot="footer">
                <button @click="registerSubmit" type="button" class="btn btn-primary">注册</button>
                <button type="button" class="btn btn-secondary">取消</button>
                <a href="">我有账号，立即登录</a>
            </template>
        </modal>
        <!-- 登录 -->
        <modal :show="modelName === 'login'" :title="'登录'" @close="modalClose">
            <form>
                <div class="form-group row">
                    <label for="login_username" class="col-md-3 col-form-label">用户名</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" id="login_username" placeholder="用户名" 
                            v-model="login_info.username"
                        />
                    </div>
                </div>
                <div class="form-group row">
                    <label for="login_password" class="col-md-3 col-form-label">密码</label>
                    <div class="col-md-9">
                        <input type="password" class="form-control" id="login_password" placeholder="密码" 
                            v-model="login_info.password"
                        />
                    </div>
                </div>
            </form>

            <template slot="footer">
                <button @click="loginSubmit" type="button" class="btn btn-primary">登录</button>
                <button type="button" class="btn btn-secondary">取消</button>
                <a href="">我要注册</a>
            </template>
        </modal>
    </div>
</template>

<script>
    import Modal from '@/components/modal/Modal';
    // import axios from 'axios';
    // axios.defaults.withCredentials = true; //让ajax携带cookie
    import qs from 'qs'
    export default {
        data() {
            return {
                modelName: '', // 展示哪个模态框
                register_info: {
                    username: '',
                    password: '',
                    repassword: '',
                },
                login_info: {
                    username: '',
                    password: '',
                },
                // 用户信息
                userInfo: {
                    uid: 0,
                    username: '',
                }
            }
        },
        created() {
            // 从cookie中获取用户登录cookie
            // 由于uid后端设置的是httpOnly，所以下面只拿得到username，拿不到uid的cookie
            // console.log(document.cookie);
            if (document.cookie) {
                // cookie = "uid=1; username=admin;" => ['uid=1', 'username=admin']
                let arr1 = document.cookie.split("; ");
                let cookiesArr = arr1.map(item => {
                    // item = "uid=1" => ['uid', 1]
                    let arr2 = item.split("=");
                    return {
                        [arr2[0]]: arr2[1]
                    }
                });
                let cookie = Object.assign({}, ...cookiesArr);
                // {uid: "6", username: "YWRtaW4"}
                console.log(cookie);
                // 因为username为中文，无法设置cookie。所以后端用buffer转的username存的，此处就需要转回成原始useranme
                this.userInfo.username = new Buffer(cookie.username, 'base64').toString();
            }
        },
        methods: {
            register() {
                this.modelName = 'register';
            },
            login() {
                this.modelName = 'login';
            },
            // 下面方法会在子组件“模态窗”关闭按钮被点击后触发
            modalClose() {
                this.modelName = '';
            },
            registerSubmit() {
                // console.log(this.register_info);
                this.$ajax({
                    method: 'post',
                    // url: '/api/register',
                    url: '/register',
                    data: qs.stringify(this.register_info)
                }).then(res => {
                    if (res.data.code) {
                        alert(res.data.data);
                    } else {
                        this.modelName = 'login'
                    }
                });
            },
            loginSubmit() {
                this.$ajax({
                    method: 'post',
                    // url: '/api/login',
                    url: '/login',
                    data: qs.stringify(this.login_info),
                }).then(res => {
                    if (res.data.code) {
                        alert(res.data.data);
                    } else {
                        this.modelName = ''
                        this.userInfo.uid = res.data.data.id;
                        this.userInfo.username = res.data.data.username;
                    }
                });
            }
        },
        components: {
            Modal
        }
    }
</script>

<style lang="scss" scoped>

</style>